<script setup lang='ts'>
import VScaleScreen from 'v-scale-screen'
import * as mapWork from "./index.ts"
import MarkerDialog from '@/components/MarkerDialog.vue';
import svgCircle from '@/components/svgCircle.vue';
import homeCricle from '@/components/homeCricle.vue';


import * as echarts from 'echarts'

// onMounted(() => {
//   mapWork.onMounted('newMap')
// })


// onUnmounted(() => {
//   mapWork.destroy()
// })



const showMarkerDialog = ref(false);
function onMarkerDialogClose() {
  showMarkerDialog.value = false;
}

function onMarkerDialogConfirm(data: { name: string; desc: string }) {
  // 这里可以处理添加标记的逻辑
  showMarkerDialog.value = false;
  // TODO: 调用地图API添加标记
}


const startPoint = () => {
  mapWork.startPoint(1)
}



const endPoint = () => {
  mapWork.endPoint(1)
}

const drawRectangleFW = () => {
  mapWork.drawRectangleFW()
}
const drawCircle = () => {
  mapWork.drawCircle()
}
const drawPolygonFW = () => {
  mapWork.drawPolygonFW()
}

var img = ``;



var color = new echarts.graphic.LinearGradient(0, 0, 1, 0, [
  {
    offset: 0,
    color: "red",
  },
  {
    offset: 1,
    color: "yellow",
  },
]);

const option = computed(() => {
  let val = 65;
  let value = val / 100;
  let startAngle = 225;
  let endAngle = -45;
  let splitCount = 34; // 刻度数量
  let pointerAngle = (startAngle - endAngle) * (1 - value) + endAngle;
  return {
    tooltip: {
      show: true, // 是否显示提示框，默认为true
      // trigger: "item", // 数据项图形触发
      // axisPointer: {
      //   // 指示样式
      //   type: "shadow",
      //   axis: "auto",
      // },
      // padding: 5,
      // textStyle: {
      //   // 提示框内容的样式
      //   color: "#fff",
      // },
      // formatter: function (params) {
      //   return (
      //     '<span style="color: #fff;">超标数'+ getvalue/100 * _that.sxt.sum + "个</span>"
      //   );
      // },
    },
    // polar: {
    //   center: ["50%", "50%"],
    //   radius: "170%", //图形大小
    // },
    series: [
      {
        // 值外
        type: "gauge",
        radius: "95%",
        startAngle: pointerAngle,
        endAngle: endAngle,
        splitNumber: 1,
        axisLine: {
          show: false,
          lineStyle: {
            width: 3,
            opacity: 0,
          },

        },
        title: { show: false },
        detail: {
          // color: "#fff",
          // fontSize,
          valueAnimation: true,
          lineHeight: 56,
          offsetCenter: [0, '15%'],
          // formatter: (value) => {
          //   return '处置及时率\n\n' + parseFloat(((value * 100)).toFixed(2)) + '%';  // 添加了额外的换行符\n来增加间隔
          // },
          formatter: (value) => {
            return [
              '{a|处置及时率}',
              `{b|${parseFloat(((value * 100)).toFixed(2))}%}`
            ].join('\n')  // 添加了额外的换行符\n来增加间隔
          },
          rich: {
            a: {
              color: '#fff',
              fontSize: 20,
            },
            b: {
              color: '#fff',
              fontSize: 30,
            }
          },




        },

        splitLine: { show: false },
        axisTick: {
          length: 20,
          splitNumber: Math.ceil((1 - value) * splitCount),
          lineStyle: {
            color: "#3a5060",
            width: 5,
          },
        },
        axisLabel: { show: false },
        pointer: { show: false },
        itemStyle: {},
        markPoint: {
          animation: true,
          silent: false,
          data: [
            {
              symbolSize: 280,
              itemStyle: {
                borderWidth: 3,
              },
            },
            {
              symbol: "circle",
              symbolSize: 200,
            },
          ],
        },
        data: [
          {
            value: value,
            name: "test gauge",
          },
        ],
      },
      {
        // 值内
        type: "gauge",
        radius: "95%",
        startAngle: startAngle,
        endAngle: pointerAngle,
        splitNumber: 1,
        axisLine: {
          show: false,
          lineStyle: {
            width: 3,
            opacity: 1,
          },

        },
        tooltip: {
          show: true,
        },
        title: { show: false },
        detail: { show: false },
        splitLine: { show: false },
        axisTick: {
          length: 20,
          splitNumber: Math.ceil(value * splitCount),
          lineStyle: {
            // color: {
            //   //   image: document.getElementById('bg_img'),
            //   //   repeat: 'no-repeat'
            //   image: img,
            // },
            color: "#2fcac9",
            // color: {
            //   type: 'radial',
            //   x: 0.5,
            //   y: 0.5,
            //   r: 0.5,
            //   colorStops: [{
            //     offset: 0, color: '#fff' // 0% 处的颜色
            //   }, {
            //     offset: 1, color: '#49b5b0' // 100% 处的颜色
            //   }],
            //   global: true // 缺省为 false
            // },





            width: 5,
          },
        },
        axisLabel: { show: false },
        pointer: { show: false },
        itemStyle: {},
        data: [
          {
            value: value,
            name: "test gauge",
          },
        ],
      },
    ],
  };

})

const optionPie = computed(() => {
  return {

    series: [

      {
        name: "发货数量",
        type: "pie",
        radius: "15%",
        center: ["88%", "55%"],
        clockwise: true,
        data: [
          {
            value: 15,
            itemStyle: {
              normal: {
                color: "yellow",
              },
            },
            name: "大于100",
          },
          {
            value: 85,
            itemStyle: {
              normal: {
                color: "blue",
              },
            },
            name: "小于100",
          },
        ],
        label: {
          normal: {
            show: false,
            textStyle: {
              color: "#110",
              fontSize: 12,
            },
          },
        },
        labelLine: {
          normal: {
            show: false,
          },
        },
      },


    ],
  };

})




</script>

<template>

  <VScaleScreen width="1920" height="1080">

    <!-- <div id="newMap" class="mars3d-container pos-relative"></div> -->
    <svgCircle class='ml-[500px]' sWidth='144' sHeight='144' value='60' strokeWidth='20' circleR="55" :textX="'42'"
      :textY="'82'">
    </svgCircle>

    <homeCricle class='ml-[500px] mt-[100px]' sWidth='107' sHeight='107' value='60' strokeWidth='10' circleR="49"
      :textX="'30'" :textY="'66'"></homeCricle>

    <app-chart style="height: 300px;width: 300px;" :option="optionPie" />



    <MarkerDialog v-if="showMarkerDialog" @close="onMarkerDialogClose" @confirm="onMarkerDialogConfirm" />

    <div class="fixed top-[100px] flex flex-col gap-[10px] justify-start ">
      <el-button class="ml-[12px]" @click="showMarkerDialog = true">add</el-button>
      <el-button class="ml-[12px]" @click="startPoint">起点</el-button>
      <el-button class="ml-[12px]" @click="endPoint">终点</el-button>
      <el-button class="ml-[12px]" @click="drawRectangleFW">矩形</el-button>
      <el-button class="ml-[12px]" @click="drawCircle">圆形</el-button>
      <el-button class="ml-[12px]" @click="drawPolygonFW">多边形</el-button>
      <app-chart style="height: 300px;width: 300px;" :option="option" />







    </div>

  </VScaleScreen>

</template>

<style>
.mars3d-divGraphic-edit {
  background-color: transparent;
  border: none
}


.marsImgPanel2 {
  position: relative;
  width: 200px;
  height: 157px;
  background: rgba(42, 42, 42, 0.8);
  border-radius: 4px;
  background: url("/public/img/marsImgPanel2.png");
  background-size: 100%;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;

  -webkit-animation: mymove 5s infinite;
  animation: mymove 5s infinite;
  animation-duration: 5s;
  animation-timing-function: ease;
  animation-delay: 0s;
  animation-iteration-count: infinite;
  animation-direction: normal;
  animation-fill-mode: none;
  animation-play-state: running;
  animation-name: mymove;
}

.marsImgPanel2 .title {
  position: inherit;
  top: 22px;
  left: 70px;
  font-size: 14px;
  text-align: left;

  color: rgba(255, 255, 255, 1);
  text-shadow: 0px 0px 9px rgba(0, 0, 0, 0.75);
}

.marsImgPanel2 .content {
  position: inherit;
  font-size: 14px;
  top: 30px;
  left: 50px;
  width: 140px;
  height: auto;
  text-align: left;
  color: rgba(255, 255, 255, 1);
  overflow: hidden;
}
</style>
